<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card >
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-table :data="noticeList" stripe style="font-size: 15px;width:1170px">
        <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
        <el-table-column align="center" label="标题" width="400" prop="title">
          <template slot-scope="scope" >
            <el-link type="primary" @click="showContent(scope.row.id)">{{scope.row.title}}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布时间" width="180" >
          <template slot-scope="scope" >
            <span type="primary">{{$moment(scope.row.publishTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="更新时间" width="180" >
          <template slot-scope="scope" >
            <span type="primary">{{$moment(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作(编辑/删除)" width="270" > 
          <template slot-scope="scope" >
            <el-button type="success" icon="el-icon-edit" circle @click="editNotice(scope.row.id)" ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteNotice(scope.row.id)" style="margin-left:10%"></el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-row style="font-size: 15px;width:1170px">
        <el-link icon="el-icon-plus" type="primary" round style="margin-left: 45%; margin-top: 20px;font-size: 15px" 
          @click="addNotice">新建通知</el-link>
      </el-row>
    </el-card>
  </div>
</template>

<script> 
  import {getNoticesList,deleteNoticeById} from '../../axios/notice'
  export default {
    name: 'AdminNotices',
    data(){
      return { 
        noticeList: [] // 公告列表
      }
    },
    methods:{
      getNotices(){
        // 获取通知公告列表
        getNoticesList().then(res => {
          if(res.success){
            this.noticeList = res.data
          } 
        })

      // 无后端，模拟数据
      // let notices = [
      //   {  
      //     id: '1', 
      //     title: '关于开展20XX届本科生毕业论文（设计）相似性检测工作的通知', 
      //     publishTime: '2022-01-19 23:52:21',
      //     updateTime: '2022-01-22 23:52:21',
      //     content: '各学院：\n' + 
      //                               '根据《XXXX大学本科生毕业论文（设计）相似性检测实施办法》等文件精神，为做好2020届本科生毕业论文（设计）相似性检测工作，现将相关事宜通知如下：\n' + 
      //                               '    一、检测对象\n' + 
      //                               '         2020届本科生毕业论文（部分毕业设计的专业除外）。\n' + 
      //                               '     二、检测时间\n' + 
      //                               '         系统开放时间为2020年4月9日—5月13日，具体检测时间由各学院自定。\n' + 
      //                               '     三、检测程序\n' + 
      //                               '         学校使用维普论文检测系统进行毕业论文（设计）相似性检测工作。学生在XXXX大学毕业论文（设计）智能管理系统中经指导教师同意后再上传论文（设计）定稿，系统会自动进行相似性检测，并将检测结果和查重报告反馈给指导教师和学生本人，作为论文（设计）评分的重要依据。\n' + 
      //                               '     四、检测要求\n' + 
      //                               '         1.检测文稿以word文档上传。\n' + 
      //                               '         2.学生进行文档检测时，请将定稿后的毕业论文（设计）按照标题、摘要、关键词、目录、正文、参考文献、附录及致谢的顺序排版后上传。\n' + 
      //                               '         3.学生提交检测的单篇文档不得超过20M，如果文档过大，请去除文档中过大的图片；检测系统只针对文字内容进行检测，不对表格、代码、公式及图片进行检测。\n' + 
      //                               '         4.每篇毕业论文（设计）当年原则上限检1次，请确认论文定稿无误后再上传。\n' + 
      //                               '     五、检测结果的处理\n' + 
      //                               '         进行处理。检测过程中如有问题，请及时与教务处实践教学科联系。\n\n\n\n' +  
      //                               '      \t\t\t\t\t\t\t教务处 \n' + 
      //                               '      \t\t\t\t\t\t\t2020年3月30日\n' + 
      //                               '      \t\t\t\t\t\t\t联系人：黄老师 卢老师 李老师\n' + 
      //                               '      \t\t\t\t\t\t\t联系电话：23232323\n' + 
      //                               '      \t\t\t\t\t\t\t电子邮箱:XXXXXX.@abc.edu.cn \n'
      //     },
      //     {  
      //       id: '2', 
      //       title: '我是一个没有感情的测试数据', 
      //       publishTime: '2022-01-21 23:52:21',
      //       updateTime: '2022-01-22 23:52:21', 
      //       content:  '我是一个没有感情的测试数据\n' + 
      //                               '我是一个没有感情的测试数据\n' +
      //                               '我是一个没有感情的测试数据\n' +
      //                               '我是一个没有感情的测试数据\n' +
      //                               '我是一个没有感情的测试数据\n' +
      //                               '我是一个没有感情的测试数据\n' +
      //                               '我是一个没有感情的测试数据\n' +
      //                               '我是一个没有感情的测试数据\n'
      //     }
      //   ] 
      //   this.noticeList = notices
      },
      showContent(id){ 
        // 进入公告详情页 
        this.$router.push(`${this.$route.path}/${id}`) 
      },
      // 编辑指定 id 的通知
      editNotice(id){ 
        this.$router.push(`/admin/edit/notice/${id}`) 
      },
      // 新建通知
      addNotice(){
        this.$router.push('/admin/add/notice')
      },
      deleteNotice(id){ 
        this.$confirm('此操作将永久删除此条通知, 是否继续?', '提示', {
          roundButton: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消', 
          type: 'warning'
        }).then(() => {
          // 发送后端请求，删除指定 id 的通知
          deleteNoticeById(id).then(res => {
            if(res.success){
              this.$message.success('删除成功!'); 
              this.getNotices()
            }
          }) 
        }).catch(() => {
          this.$message.info('已取消删除!');          
        });
      }
    },
    // 生命钩子，创建时调用
    created(){
      this.getNotices()
    },
  }
</script>

<style scoped>
  
</style>